import React, { useEffect, useState } from 'react'
import {  useNavigate, useParams } from 'react-router-dom'
import {getmsjhomesdeatil,getUser2Djm} from '../../api/api'
import { message } from 'antd';
import {
  LeftOutlined,
  WechatOutlined,
  ChromeFilled,
  DeploymentUnitOutlined,
  MinusCircleOutlined,
  PlusCircleFilled
} from '@ant-design/icons';
import '../msjhomes.css'
export default function HomeDetail() {
  const [messageApi, contextHolder] = message.useMessage();
  let {id}=useParams()
  let [nums,setnums]=useState(1)
  let [detail,setdetail]=useState({}) 
  let [bol,setbol]=useState(true)
  let [kq,setkq]=useState('')
  let navigate=useNavigate()
let [users,setusers]=useState({})
  const error = (txt) => {
    messageApi.open({
      type: 'error',
      content: txt,
    });
  };

  useEffect(()=>{
    let user=sessionStorage.getItem('user')
    getmsjhomesdeatil(Number(id)).then(res=>{
      let data=res.data 
      let date=new Date().toLocaleDateString().replaceAll('/','-')
      let kqshi=data.kqtime.split(":")[0]+":"+data.kqtime.split(":")[1]
      let now=new Date().getTime()
      data.imgs=JSON.parse(data.imgs)
      setdetail(data)
      if(now-Number(new Date(`${date} ${data.kqtime}`))>=0){
        setbol(false)
      }else{
        setbol(true)
        setkq(kqshi)
      }
    })

    getUser2Djm(user).then(res=>{
      setusers(res.data)
    })    
  },[])
  console.log(detail);
  console.log(users);
  return (
    <div className='msj_homedetail'>
      <div className='msj_homedetail_head'>
          <LeftOutlined onClick={()=>{
            navigate(-1)
          }} />
          <p>{detail?.name}</p>
          <div style={{'fontSize':'18px'}}>
          <WechatOutlined style={{'color':'#51C332'}} />
          <ChromeFilled style={{'color':'#5BE5EF',"margin":'0 10px'}} />
          <DeploymentUnitOutlined style={{'color':'#ccc'}} />
          </div>
      </div>
      {(!bol&&(users?.points-detail?.xhjifen<=1))?(<div className='msj_homedetail_jif'>
          <span>消耗积分 : <span style={{'color':'#1DBFFE'}}>{detail?.xhjifen}</span> 积分 </span>
          <span style={{'color':'#999'}}>可用积分 : <span style={{'color':'#1DBFFE'}}>{users?.points}</span> 积分</span>
      </div>):''}
       {
        detail?.imgs?.map((v,i)=>{
          return <div key={i} className='msj_homedetail_img'>
              <img src={v} alt="" />
              <div style={{'width':'100%','fontSize':'14px','boxSizing':'border-box','padding':'10px',"color":'#999','textAlign': 'left'}}>
              {detail?.jieshao}
              </div>
          </div>
        })
       }

       {contextHolder}
      <div className='msj_homedetail_fot'>
        <div className='msj_homedetail_fot_l'>
          <div style={{'color':'#FAAB34',"fontSize":'14px',"display":'flex',"alignItems":'center'}}>
          <MinusCircleOutlined onClick={()=>{
            if(nums==1){
              error('最少1份') 
            }else{
              setnums(nums-1)
            }
            
          }} style={{'fontSize':'20px'}} />
          <span style={{'margin':'0 5px'}}>{nums}</span>
          <PlusCircleFilled onClick={()=>{
            if(Number(detail?.nums)<=50&&nums>=2){
              error('一人最多两份') 
            }else if(Number(detail?.nums)==0){
              error('已售完')
            }else{
              setnums(nums+1)
            }
          }} style={{'fontSize':'20px'}} />
          {
            (Number(detail?.nums)<=50&&Number(detail?.nums)>0)&&<span style={{'fontSize':'13px','color':'#999','margin':'0 5px'}}>仅剩{detail.nums}份</span>
          }
          </div>
          <p>
            ￥{detail?.price}
          </p>
        </div>
        {(bol || (Number(detail?.nums)>0&&(users?.points-detail?.xhjifen>1)))?(<button type="button" onClick={()=>{
          navigate(`/dingdan`)
          sessionStorage.setItem('number',id)
         }} style={{'color':'#fff',"borderRadius":'0','width':'25%',"height":'50px','fontSize':'14px'}} disabled={bol}  className="btn btn-warning">{bol?(<><p>{kq}</p>开抢</>):(Number(detail?.nums)<=50?'马上抢':'购买')}</button>):(<button type="button" onClick={()=>{
          if(Number(detail?.nums)>0&&users?.points-detail?.xhjifen<=1){
            error('积分不足')
          }else{
            error('已售空')
          }
        }} style={{'color':'#fff',"borderRadius":'0','width':'25%',"height":'50px','fontSize':'14px'}}   className="btn btn-secondary">
          {(Number(detail?.nums)>0&&(users?.points-detail?.xhjifen<=1))?'积分不足':'已售完'} 
          </button>)}
      </div>
    </div>
  )
}
